<template>
  <div class="question-list">
    <div v-for="(item, index) in questionList" :key="index">
      <!-- 单选 -->
      <choice-question-radio 
        v-if="item.type === 'radio'"
        :list="item.optionList"
        :title="item.title"
        :questionIndex="index"
        :value="item.value"
        @pushValue="getValue"></choice-question-radio>

      <!-- 多选 -->
      <choice-question-checkbox
        v-if="item.type === 'checkbox'"
        @pushValue="getValue"
        :title="item.title"
        :value="item.value"
        :questionIndex="index"
        ></choice-question-checkbox>
      
      <!-- 文本输入 -->
      <input-question
        v-if="item.type === 'input'"
        @pushValue="getValue"
        :title="item.title"
        :questionIndex="index"
        ></input-question>
    </div>
  </div>
</template>

<script>
import choiceQuestionRadio from '@/components/choice-question-radio.vue'
import choiceQuestionCheckbox from '@/components/choice-question-checkbox.vue'
import inputQuestion from '@/components/inputQuestion.vue'

export default {
  components: { 
    choiceQuestionRadio,
    choiceQuestionCheckbox,
    inputQuestion
  },
  data () {
    return {
      questionList: [
        {
          type: 'radio',
          title: '测试title很长-请选择座椅材质卡号收款方哈卡卡很舒服哈卡发哈？',
          optionList: [
            {name: '织物',},
            {name: '仿皮'},
            {name: '真皮'},
            {name: 'Alcantata'},
            {name: 'Nappa真皮'},
            {name: '翻毛皮'},
          ],
          value: ''
        },
         {
          type: 'radio',
          title: '请选择座椅材质？',
          optionList: [
            {name: '织物',},
            {name: '仿皮'},
            {name: '真皮'},
            {name: 'Alcantata'},
            {name: 'Nappa真皮'},
            {name: '翻毛皮'},
          ],
          value: ''
        },
        {
          type: 'checkbox',
          title: '请选择座椅材质？',
          optionList: [
            {name: '织物',},
            {name: '仿皮'},
            {name: '真皮'},
            {name: 'Alcantata'},
            {name: 'Nappa真皮'},
            {name: '翻毛皮'},
          ],
          value: []
        },
        {
          type: 'input',
          title: '请输入该车的具体款式？',
          value: ''
        },
      ],
    }
  },
  methods: {
    getValue (obj) {
      this.$set(this.questionList[obj.index], 'value', obj.value)
      this.$forceUpdate()
    }
  }
}
</script>